<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Formdata对象</title>
</head>
<body>
	<!-- Formdata对象的作用：
	 	1、模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的对象拼接成请求参数的格式
	 	2、异步上传二进制文件 -->


		
		<!-- 1、创建普通的html表单 -->
		<form  id="form">
			<input type="text" name="username">
			<input type="password" name="password">
			<input type="button" id="btn" value="提交">
		</form>
		<script type="text/javascript">
			// 获取按钮
			var btn = document.getElementById('btn');
			// 获取表单
			var form = document.getElementById('form');
			// 为按钮添加单击事件
			btn.onclick=function (){
				// 2、将普通html表单转换成表单对象
				var formData = new FormData(form);
				// 创建ajax对象，然后提交表单对象
				var xhr = new XMLHttpRequest();
				// 配置ajax对象(formData表单对象只能以post方式请求)
				xhr.open("post","http://localhost:3000/formData");
				// 发送ajax请求
				xhr.send(formData);
				// 监听xhr对象下面的onload对象
				xhr.onload=function (){
					// 对象http状态码进行判断
					if (xhr.status==200) {
						console.log(xhr.responseText);

					}


				}
			}






		</script>






	
</body>
</html>